<template>
    <div
        class="flex items-center cursor-pointer hover:text-primary"
        :class="{ 'text-primary': audioPlaying }"
        @click="togglePlay"
    >
        <span
            class="flex ml-[10px]"
            :class="{ '!opacity-100': audioPlaying }"
        >
            <Icon :name="`el-icon-${audioPlaying ? 'VideoPause' : 'VideoPlay'}`" :size="size" />
        </span>
    </div>
</template>

<script lang="ts" setup>
import { useAudioPlay } from '@/hooks/useAudio'

const props = defineProps({
    // 音频地址
    url: {
        type: String
    },
    // 图标大小
    size: {
        type: Number,
        default: 18
    }
})

const { pause, play, audioPlaying } = useAudioPlay()
const togglePlay = () => {
    if (!props.url) {
        return
    }

    if (audioPlaying.value) {
        pause()
    } else {
        play(props.url)
    }
}
</script>
